<template>
  <div class="searchGoods">
    <van-nav-bar
      title="搜索商品"
      left-arrow
      left-text="返回"
      @click-left="goBack"
    />
    <div class="img-field">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
        >
          <van-row>
              <van-col span="12" v-for="(item, index) in goodsList" :key="index" class="border">
                <div @click="goGoodsDetail(item.ID)">
                  <img v-lazy="item.IMAGE1" alt="IMAGE1" width="96%">
                  <div class="img-name">{{ item.NAME }}</div>
                  <div class="img-price">
                    <span class="origin-price">原价：¥{{item.ORI_PRICE | toMoney}}</span>
                    <span class="present-price">现价：¥{{item.PRESENT_PRICE| toMoney}}</span>
                  </div>
                </div>
              </van-col>
          </van-row>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import requestUrl from "../../serverApi";
import toMoney from "../../filter/moneyFilter";
export default {
  data() {
    return {
      searchVal: this.$route.query.searchVal,
      goodsList: [],
      page: 1,
      loading: false,
      finished: false,
      isRefresh: false
    };
  },
  methods: {
    initData() {
      this.goodsList = [];
      this.page = 1;
      this.loading = false;
      this.finished = false;
      this.isRefresh = false;
    },
    goBack() {
      this.$router.go(-1);
    },
    getGoodsList() {
      const url = `${requestUrl.searchGoods}?goodsName=${decodeURIComponent(
        this.searchVal
      )}&page=${this.page}`;
      axios
        .get(url)
        .then(result => {
          const { data } = result;
          // 这里的判断条件一定要加上length，否则会一直发送请求，因为data.message会一直存在，onLoad函数在打开页面时会一直调用
          if (data.code === 200 && data.message.length) {
            this.page++;
            this.goodsList = this.goodsList.concat(data.message);
          } else {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.finished = true;
        });
    },
    onLoad() {
      const interval = setTimeout(() => {
        this.getGoodsList();
        clearTimeout(interval);
      }, 1000);
    },
    onRefresh() {
      setTimeout(() => {
        this.initData();
        this.onLoad();
      }, 1000);
    },
    goGoodsDetail(goodsId) {
      this.$router.push({
        name: 'GoodsDetail',
        query: {
          goodsId: goodsId
        }
      });
    },
  },
  mounted() {
    const clientHeight = document.documentElement.clientHeight;
    const imgField = document.getElementsByClassName("img-field")[0];
    imgField.style.height = clientHeight - 46 + "px";
  },
  filters: {
    toMoney(value) {
      return toMoney(value);
    }
  }
};
</script>

<style scoped>
.img-field {
  overflow: auto;
  background-color: #fff;
}
.img-name {
  font-size: 12px;
  text-align: center;
}
.img-price {
  font-size: 12px;
}
.origin-price {
  color: red;
  text-decoration: line-through;
}
.present-price {
  color: green;
}
.van-col--12 {
  box-sizing: border-box;
  border-left: none;
  border-bottom: none;
}
</style>